<template>
<div class="chat_content">
  <div class="chat_list">
    <div class="info" v-for="(item,key) in indexStore.replyMap" :key="key">
      <div class="chat_icon">
        <img src="../assets/dg_logo.png"/> <div class="question">{{item.question}}</div>
        <div class="op_btn">
          <img class="icon_copy" @click="opMap(key,'copy')" src="../assets/icon_copy.png"/>
          <img class="icon_fresh" @click="opMap(key,'fresh')" src="../assets/icon_fresh.png"/>
        </div>
      </div>
      <div class="chat_reply" v-html="item.answerMessage">
      </div>
    </div>
<!--    <div class="info" v-if="indexStore.answerMessage!==''">-->
<!--      <div class="chat_icon">-->
<!--        <img src="../assets/dg_logo.png"/>-->
<!--        <div class="question">{{indexStore.question}}</div>-->
<!--        <div class="op_btn">-->
<!--          <img class="icon_copy" @click="op(-1,'copy')" src="../assets/icon_copy.png"/>-->
<!--          <img class="icon_fresh" @click="op(-1,'fresh')" src="../assets/icon_fresh.png"/>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="chat_reply">-->
<!--        {{indexStore.answerMessage}}-->
<!--      </div>-->
<!--    </div>-->
  </div>
  <div class="chat_input">
    <input v-model="question" @focus="loginDetect" @keydown.enter="submit"/>  <img @click="submit" src="../assets/icon_send.png"/>
  </div>
</div>
</template>

<script>
import { useIndexStore } from "../stores/index.js";
import { mapStores } from "pinia";
import { getHistoryList } from "../api";
import SocketConn from "../util/SocketConn";
let WebConn = null;
export default {
  name: "chatContent",
  data(){
    return {
      question:"",
      chatReplyList:[]
    }
  },
  computed:{
    ...mapStores(useIndexStore)
  },
  watch:{
    "indexStore.newDialogEvent":function(o,v){
       this.chatReplyList=[];
    },
    "indexStore.loginSuccessEvent":function(v,o){
       if(v){
         WebConn = new SocketConn();
       }
    }
  },
  methods:{
    submit(){
      // this.$emit("sub_event",{});
      if(this.question.trim() === ""){
        this.$message.error({
          message:"问题不能为空"
        });
        return;
      }
      if(Object.keys(this.indexStore.userInfo).length === 0){
        //需要登录
        this.indexStore.sendNeedLoginEvent();
      }else{
        if(!WebConn){
           WebConn = new SocketConn();
        }else if(!WebConn.openStatus){
          WebConn.openSocket();
        }
        this.detectSendMessage();
      }
    },
    detectSendMessage(){
      if(WebConn.openStatus){
        WebConn.sendMessage(this.question);
        this.indexStore.$patch((state)=>{
          state.preQuestion = state.question;
          state.question = this.question;
        });
        this.question = "";
      }else{
        setTimeout(()=>{
          this.detectSendMessage();
        },500)
      }
    },
    loginDetect(){
      if(Object.keys(this.indexStore.userInfo).length === 0){
        //需要登录
        this.indexStore.sendNeedLoginEvent();
      }
    },
    opMap(requestId,act){
      if(act === "copy"){
        const input = document.createElement("input");
        input.value = this.indexStore.replyMap[requestId].answerMessage;
        document.body.appendChild(input)
        input.select();
        document.execCommand("Copy");
        this.$message({
          message:"复制成功",
          type:"success"
        });
        document.body.removeChild(input)
      }
    },
    // op(index,act){
    //   if(act === "copy"){
    //     const input = document.createElement("input");
    //     if(index === -1){
    //       input.value = this.indexStore.answerMessage;
    //     }else{
    //       input.value = this.chatReplyList[index].question;
    //     }
    //
    //     document.body.appendChild(input)
    //     input.select();
    //     document.execCommand("Copy");
    //     this.$message({
    //       message:"复制成功",
    //       type:"success"
    //     });
    //     document.body.removeChild(input)
    //   }
    // },
    loadHistory(){

    }
  },
  mounted(){
    if(Object.keys(this.indexStore.userInfo).length > 0){
      this.loadHistory();
    }
  }
}
</script>

<style lang="less" scoped>
  .chat_content{
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    .question{
      display:inline-block;
      color:#333;
      vertical-align: top;
      margin-left: 10px;
    }
    .chat_list{
      flex:1;
      margin-bottom:10px;
      overflow: auto;
      .chat_reply{
        color:#333;
      }
    }
    .chat_input{
      height:50px;
      display:flex;
      position:relative;
      overflow: hidden;
      input{
        flex:1;
        padding:0 10px;
        border:1px solid #dcdcdc;
        border-radius:10px;
      }
      img{
        position:absolute;
        cursor:pointer;
        width:30px;
        height:30px;
        top:10px;
        right:15px;
      }
    }
    .chat_icon{
      position:relative;
      margin:15px 0 10px;
      img{
        width:30px;
        height:auto;
      }
      .op_btn{
        position:absolute;
        right:10px;
        bottom:0;
        display:flex;
        align-items: center;
        .icon_copy{
          width:15px;
          height:15px;
          cursor:pointer;
        }
        .icon_fresh{
          width:22px;
          height:22px;
          cursor:pointer;
        }
      }
    }
    .chat_reply{
      font-size:14px;
    }
  }
</style>
